<!DOCTYPE html>
<html>
  <head>
    <title>运算符拓展</title>
    <style></style>
  </head>
  <body>
    <script>
      //   1、指数运算   右结合，即从右边开始算
      console.log(2 ** (3 ** 2)) // 512
      console.log('\n')

      //   --------------------------------------------------
      //   2、链判断符 ES2020
      //   如果后续为null或undefined，直接返回undefined，并不再继续执行
      const obj = {
        a: { b: { c: { d: 1 } } },
        func() {
          return this.a
        },
      }
      console.log(obj?.a?.b?.c?.d, obj?.xxx?.b?.c?.d)
      //   用于判断有没有对应函数，例如：
      //   if (myForm.checkValidity?.() === false) {
      //     // 表单校验失败
      //     return
      //   }
      console.log(obj.func?.(), obj.funcXXX?.())
      console.log('\n')

      //   --------------------------------------------------
      //   3、Null判断运算符 ??  ES2020
      //   用于解决赋初值的问题，如下：
      /************************
      //   const name = response.name || "default name"
      //   意图是undefined和null赋予默认值，然而一切在"=="情况下判断为false的都会触发，包括[],[""],"",0
      ************************/
      const response = { name: 0 }
      const name1 = response.name || 'default name'
      const name2 = response.name ?? 'default name'
      console.log('name1: ', name1, '\nname2: ', name2)
      console.log('\n')
      //   也可以配合?用于对undefined或null赋初值
      //   const name3 = response.settings?.animationDuration ?? 300;

      //   --------------------------------------------------
      //   4、逻辑赋值运算符  ES2021
      //   ||= &&= ??=
      //   x ||= y 等同于 x || (x = y)，其他同理
      response.setting ||= 1
    </script>
  </body>
</html>
